<template>
	<div>
		<el-divider />
		<el-form ref="formRef" :model="wyform" :rules="rules" label-width="130px">
			<el-form-item label="客户姓名:">{{wyform.name}}</el-form-item>
			<el-form-item label="旧床位详情:">{{wyform.bedDetails}}</el-form-item>
			<el-form-item label="性别:">{{wyform.sex === 0 ? '女' : '男'}}</el-form-item>
			<el-form-item label="楼号:">致馨公寓3号楼</el-form-item>
			<el-form-item label="新房号:" prop="roomNo">
				<el-select-v2
					filterable
					v-model="wyform.roomNo"
					placeholder="请选择房间号"
					:options="roomList"
					:props="roomapi.roomProps"
					@change="changeRoomNo"></el-select-v2>
			</el-form-item>
			<el-form-item label="当前床位起始日期:">{{wyform.startDate}}</el-form-item>
			<el-form-item label="新床号:" prop="newbedId">
				<el-select-v2
					filterable
					v-model="wyform.newbedId"
					placeholder="请选择新床号"
					:options="bedList"
					:props="bedapi.bedProps"></el-select-v2>
			</el-form-item>
			<el-form-item label="当前床位结束日期:">{{wyform.endDate}}</el-form-item>
		</el-form>
		<el-divider />
		<div class="btns">
			<el-button class="save" type="primary" @click="save">保存</el-button>
		</div>
		
	</div>
	
</template>

<script setup>
import { reactive, ref } from 'vue'
import { get, post } from '@/axios'
import roomapi from '@/api/roomapi'
import bedapi from '@/api/bedapi'
const formRef = ref()
const props = defineProps(['id', 'urls', 'getTable'])
const emits = defineEmits(['update:show'])
const wyform = reactive({ ...await getById() ,roomNo: null, newbedId: null })
const roomList = await roomapi.getRooms()
const bedList = ref([])
const rules = {
	roomNo: [
		{ required: true, message: '请选择新房号', trigger: 'change' },
	],
	newbedId: [
		{ required: true, message: '请选择新床号', trigger: 'change' },
	]
}
function changeRoomNo () {
	wyform.newbedId = null
	bedList.value = bedapi.getBedList(wyform.roomNo, roomList)
}
function getById () {
	return new Promise(resolve => {
		get(props.urls.getById, { id: props.id } , content => {
			resolve(content)
		})
	})
}
function save () {
	post(props.urls.update, wyform, content => {
		emits('update:show', false)
		props.getTable()
	}, formRef.value)
}
</script>

<style scoped lang="scss">
.el-form {
	display: grid;
	grid-template-columns: repeat(2, 50%);
	padding: 0 30px;
	grid-column-gap: 30px;
}
.btns {
	display: flex;
	justify-content: right;
}
</style>